<template>
  <footer>
    <div class="xbx tanxin">
      <div class="f_l">
        <ul>
          <li>服务条款</li>
          <span class="line">|</span>
          <li>儿童隐私政策</li>
          <span class="line">|</span>
          <li>版权投诉</li>
          <span class="line">|</span>
          <li>投资者关系</li>
          <span class="line">|</span>
          <li>广告合作</li>
          <span class="line">|</span>
          <li>廉政举报</li>
          <span class="line">|</span>
          <li>联系我们</li>
        </ul>
        <p>
          <span class="p1">网易公司版权所有©1997-2022</span>
          <span>杭州乐读科技有限公司运营：</span>
          <a href="javascript:;">浙网文[2021] 1186-054号</a>
        </p>
        <p>
          <span class="p1"
            >粤B2-20090191-18 工业和信息化部备案管理系统网站</span
          >
          <img width="14" src="../assets/images/police.png" alt="" />
          <span>浙公网安备 33010902002564号</span>
        </p>
        <p>
          <span class="p1">互联网宗教信息服务许可证：浙（2022）0000120</span>
          <span>监督举报邮箱：51jubao@service.netease.com</span>
        </p>
      </div>
      <ul class="f_r">
        <li>
          <a class="logo-amped" href="javascript:;"></a>
          <span class="tt-amped"></span>
        </li>
        <li>
          <a class="logo-auth" href="javascript:;"></a>
          <span class="tt-auth"></span>
        </li>
        <li>
          <a class="logo-musician" href="javascript:;"></a>
          <span class="tt-musician"></span>
        </li>
        <li>
          <a class="logo-reward" href="javascript:;"></a>
          <span class="tt-reward"></span>
        </li>
        <li>
          <a class="logo-cash" href="javascript:;"></a>
          <span class="tt-cash"></span>
        </li>
      </ul>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
footer {
  height: 171px;
  background-color: #f2f2f2;
  border-top: 1px solid #ccc;
  overflow: hidden;
  div {
    height: 171px;
    .f_l {
      width: 545px;
      line-height: 24px;
      ul {
        margin-top: 20px;
        display: flex;
        color: #999;
        justify-content: space-between;
        li {
          padding-right: 5px;
          font-size: 12px;
          cursor: pointer;
        }
        .line {
          padding-right: 5px;
        }
      }
      p {
        color: #666;
        .p1 {
          padding-right: 8px;
        }
        a {
          color: #666;
          text-decoration: none;
        }
      }
    }
    .f_r {
      width: 420px;
      display: flex;;
      justify-content: space-between;
      margin-top: 33px;
      li {
        width: 60px;
        height: 70px;
        margin-right: 20px;
        a {
          display: block;
          float: none;
          width: 50px;
          height: 45px;
          margin: 0 auto;
          background: url("../assets/images/foot_enter_new.png") no-repeat;
          background-size: 110px 552px;
          &.logo-amped {
            background-position: -63px -456.5px;
          }
          &.logo-auth {
            background-position: -63px -101px;
          }
          &.logo-musician {
            background-position: 0px 0px;
          }
          &.logo-reward {
            background-position: -60px -50px;
          }
          &.logo-cash {
            background-position: 0px -101px;
          }
        }
        span {
          display: inline-block;
          margin: 5px 5px 0;
          width: 52px;
          height: 14px;
          background: url("../assets/images/foot_enter_tt.png");
          background-size: 180px 139px;
          &.tt-amped {
            background-position: 0 -108px;
            margin-left: -6px;
            width: 72px;
          }
          &.tt-auth{
            background-position: -1px -91px;
          }
          &.tt-musician{
            background-position: 0px 0px;
          }
          &.tt-reward{
            background-position: 0px -54px;
          }
          &.tt-cash{
            background-position: -1px -72px;
          }
        }
      }
    }
  }
}
</style>